﻿<%@ page pageEncoding="UTF-8"%>
<script type="text/x-template" id="multiselect">
	<div class="multi-selected-container">
		<div class="multi-selected-show" @click="toggleSelect()">
			<div class="select-each" v-bind:class="{noicon: noicon}" v-for="row in selected">
				<span class="select-span">{{getTitle(row)}}</span>
			</div>
		</div>
		<div class="select-content" v-bind:class="{none: noselected}">
			<div class="select-option-list-search" v-if="needinput">
				<input class="" @input="search($event)">
			</div>
			<div class="select-option-list">
				<div class="select-option" v-bind:class="{'select-option-choosed': inSelected(data)}" v-for="data in datas" @click="clickSelect(data, $event)">{{getValue(data)}}</div>
			</div>
		</div>
	</div>
</script>
<script>
	// select选择失去焦点消失
	$("body").on("click", "*", function(event) {
		$(".multi-selected-container .select-content").each(function() {
            $(this).parent().find(".select-content").addClass("none");
        });
        $(".multi-selected-container>.select-option-list").each(function() {
            $(this).addClass("none");
        });
        if ($(this).hasClass("multi-selected-show")) {
            $(this).parent().find(".select-content").removeClass("none");
            $(this).parent().find(".select-option-list").removeClass("none");
            event.stopPropagation();
        }
		if ($(this).hasClass("select-option-list-search")) {
            $(this).parent().parent().find(".select-content").removeClass("none");
            $(this).parent().parent().find(".select-option-list").removeClass("none");
            event.stopPropagation();
        }
	});
	var multiselect = {
		template: "#multiselect",
		data: function() {
			return {
				select: false,
			}
		},
		computed: {
			noselected: function() {
				return !this.select;
			}
		},
		props: ["datas", "selected", "type", "key", "expression", "noicon", "needinput"],
		methods: {
            getTitle: function(obj) {
                var key = this.key ? obj[this.key] : obj;
                if (this.expression) {
                    return this.expression(key);
				}
				return key;
			},
            getValue: function(obj) {
                return this.key ? obj[this.key] : obj;
            },
			// 展开收起选择框
			toggleSelect: function() {
				this.select = !this.select;
			},
			// 判断当前的地区是否被选中
			inSelected: function(data) {
				for (var i = 0; i < this.selected.length; i++) {
					var item = this.selected[i];
					if (data == item) {
						return true;
					}
				}
				return false;
			},
			search: function(event, key) {
                var target = event.target;
                var value = target.value;
                var list = target.parentNode.parentNode.querySelectorAll(".select-option");
                [].forEach.call(list, function(item) {
                    if (item.innerHTML.indexOf(value) == -1) {
                        item.classList.add("none");
                    } else {
                        item.classList.remove("none");
                    }
                });
                if (this.editable) {
                    this.$dispatch("selectedChange", {
                        type: this.value,
                        selected: value
                    });
                } else {
                    this[key] = value;
                }
            },
			// 点击选中
			clickSelect: function(data ,event) {
				if (this.selected[0] == data && this.selected.length == 1) {
					return;
				}
				var target = event.target;
				if ($(target).hasClass("select-option-choosed")) {
					$(target).removeClass(target, "select-option-choosed");
					// 去除点击的数据
					this.selected = this.selected.filter(function(item) {
						return item != data;
					});
				} else {
					$(target).addClass(target, "select-option-choosed");
					// 添加数据
					this.selected.push(data);
				}
				this.toggleSelect();
			},
		},
		ready: function() {
			this.$watch(function() {
				return this.selected;
			}, function() {
				this.$dispatch("selectedChange", {
					type: this.type,
					selected: this.selected,
				});
			});
		}
	}
</script>
<style>
    .multi-selected-container {
		position: relative;
		text-align: left;
    }
	.multi-selected-container .none {
		display: none;
	}
    .multi-selected-container .select-content {
        position: absolute;
        width: 100%;
        background: #f0f0f0;
        z-index: 1;
    }
    .multi-selected-container .select-option-list-search {
        padding: 0 5px;
        border: 1px solid #ccc;
    }
    .multi-selected-container .select-option-list-search input {
        padding: 2px 10px;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #4d90fe;
        border-radius: 8px;
        line-height: 26px;
    }
	.multi-selected-container .multi-selected-show {
		display: inline-block;
		width: 100%;
		line-height: 40px;
        min-height: 40px;
		padding: 0 8px;
		background-color: #fff;
		border: 1px solid #C8CACD;
		border-radius: 0;
		resize: none;
		box-sizing: border-box;
		vertical-align: middle;
	}
    .multi-selected-container .select-span {
        background: #eee;
        margin-right: 14px;
        vertical-align: middle;
    }
    .multi-selected-container .select-each {
        display: inline-block;
    }
    .multi-selected-container .select-each:before {
        content: "";
        display: inline-block;
        height: 24px;
        width: 24px;
        background-image: url(../../images/sprite.png);
        background-position: -632px -474px;
        vertical-align: middle;
    }
    .multi-selected-container .select-each.noicon:before {
        content: none;
    }
    .multi-selected-container .select-option-list {
        position: absolute;
        width: 100%;
        max-height: 200px;
        overflow-y: scroll;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        background: #f0f0f0;
        z-index: 1;
		box-sizing: border-box;
    }
    .multi-selected-container .select-option {
        padding: 0 8px;
    }
    .multi-selected-container .select-option:hover {
        background: #d3d3e0;
    }
    .multi-selected-container .select-option-choosed {
        background: #bbbbe6;
    }
</style>
